<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="Cha.y_chepai" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="Cha.y_jingbanren" placeholder="活动区域">
            <el-option label="全部" value=""></el-option>
          <el-option label="张强" value="张强"></el-option>
          <el-option label="李刚" value="李刚"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="YouPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Youpidelete()">批量删除</el-button>
    <el-button type="danger" @click="YouAdd()">新增</el-button>
    <el-table ref="youpidelete" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="车牌号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_chepai }}</span>
        </template>
      </el-table-column>

      <el-table-column label="车加油费用" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_feiyong }}</span>
        </template>
      </el-table-column>

      <el-table-column label="加油量" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_youliang }}</span>
        </template>
      </el-table-column>

      <el-table-column label="起始公里数" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_qishi }}</span>
        </template>
      </el-table-column>

      <el-table-column label="支付方式" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_zhifu }}</span>
        </template>
      </el-table-column>

      <el-table-column label="经办人" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_jingbanren }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.y_beizhu }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="YouEdit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="YouDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="YouPage"
    />
    <!--油费添加-->
    <el-dialog title="提示" :visible.sync="YouAddShow" width="30%">
      <el-form ref="form" :model="YouList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="YouList.y_chepai"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车加油费用">
              <el-input type="number" v-model="YouList.y_feiyong"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="加油量">
              <el-input type="number" v-model="YouList.y_youliang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始公里数">
              <el-input type="number" v-model="YouList.y_qishi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式">
              <el-input v-model="YouList.y_zhifu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经办人">
              <el-select v-model="YouList.y_jingbanren" placeholder="经办人">
                  
                <el-option label="张强" value="张强"></el-option>
                <el-option label="李刚" value="李刚"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YouList.y_beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="YouBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
      <!--油费编辑-->
    <el-dialog title="提示" :visible.sync="YouEintShow" width="30%">
      <el-form ref="form" :model="EintTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="EintTable.y_chepai"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车加油费用">
              <el-input type="number" v-model="EintTable.y_feiyong"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="加油量">
              <el-input type="number" v-model="EintTable.y_youliang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始公里数">
              <el-input type="number" v-model="EintTable.y_qishi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式">
              <el-input v-model="EintTable.y_zhifu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经办人">
              <el-select v-model="EintTable.y_jingbanren" placeholder="经办人">
                <el-option label="张强" value="张强"></el-option>
                <el-option label="李刚" value="李刚"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="EintTable.y_beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
      
        
        <el-form-item>
          <el-button type="primary" @click="Youxiu()">修改</el-button>
          
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  YouPages, //显示
  YouDeletes, //单删
  Youpideletes, //批删
  YouBaos, //添加
  YouEdits,//反填
  Youxius,//修改保存
} from "@/api/system_base/CheliangApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
        total:0,
      YouEintShow:false,
      EintTable:[],
      YouAddShow: false,
      YouList: {
        y_chepai: "",
        y_feiyong: "",
        y_youliang: "",
        y_qishi: "",
        y_zhifu: "",
        y_jingbanren: "",
        y_beizhu: "",
      },
      tableData: [],
      Cha: {
        y_chepai: "",
        y_jingbanren: "",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
    };
  },
  created() {
    this.YouPage();
  },
  methods: {
      //修改保存
      Youxiu(){
          if (this.EintTable.y_chepai == "") {
        this.$message("车牌号不能空");
        return;
      }
      if (this.EintTable.y_feiyong == "" || this.EintTable.y_feiyong <= 0) {
        this.$message("加油费用不能空或者数值范围错误");
        return;
      }
      if (this.EintTable.y_youliang == "" || this.EintTable.y_youliang <= 0) {
        this.$message("加油量不能空或者数值范围错误");
        return;
      }
      if (this.EintTable.y_qishi == "" || this.EintTable.y_qishi <= 0) {
        this.$message("起始公里数不能空或者数值范围不正确");
        return;
      }
      if (this.EintTable.y_zhifu == "") {
        this.$message("支付方式不能空");
        return;
      }
      if (this.EintTable.y_jingbanren == "") {
        this.$message("经办人不能空");
        return;
      }
      if (this.EintTable.y_beizhu == "") {
        this.$message("备注不能空");
        return;
      }
          Youxius(this.EintTable).then(
              (r)=>{
                  this.$message("修改成功");
                 
                  this.YouEintShow=false;
                   this.YouPage;
                  
              }
          )
      },
    //添加保存
    YouBao() {
      if (this.YouList.y_chepai == "") {
        this.$message("车牌号不能空");
        return;
      }
      if (this.YouList.y_feiyong == "" || this.YouList.y_feiyong <= 0) {
        this.$message("加油费用不能空或者数值范围错误");
        return;
      }
      if (this.YouList.y_youliang == "" || this.YouList.y_youliang <= 0) {
        this.$message("加油量不能空或者数值范围错误");
        return;
      }
      if (this.YouList.y_qishi == "" || this.YouList.y_qishi <= 0) {
        this.$message("起始公里数不能空或者数值范围不正确");
        return;
      }
      if (this.YouList.y_zhifu == "") {
        this.$message("支付方式不能空");
        return;
      }
      if (this.YouList.y_jingbanren == "") {
        this.$message("经办人不能空");
        return;
      }
      if (this.YouList.y_beizhu == "") {
        this.$message("备注不能空");
        return;
      }
      YouBaos(this.YouList).then((r) => {
        this.$message("添加成功");
        this.YouAddShow = false;
        this.YouPage();
      });
    },
    //批删
    Youpidelete() {
      var arrid = [];
      var id = this.$refs.youpidelete.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Youpideletes(r).then((r) => {});
          this.$message("批删成功");
          this.YouPage();
        });
      }
    },
    //添加
    YouAdd() {
      this.YouAddShow = true;
    },
    //查询
    YouPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      YouPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaYouPage() {
      this.Cha.page = 1;
      this.YouPage();
    },
    //编辑反填
    YouEdit(id) {
        this.YouEintShow=true;
        YouEdits(id).then(
            (r)=>{
                this.EintTable=r.result;
            }
        )
    },
    //删除
    YouDelete(id) {
      if (confirm("确认要删除吗")) {
        YouDeletes(id).then((r) => {
          this.$message("删除成功");
          this.YouPage();
        });
      }
    },
  },
};
</script>